<script setup lang="ts">
import { ref, type Ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';

let value: Ref<number> = ref(0)

let imgList = reactive([
    new URL('../../../assets/sqm/carousel-1.jpg', import.meta.url).href,
    new URL('../../../assets/sqm/carousel-2.png', import.meta.url).href,
    new URL('../../../assets/sqm/carousel-3.jpg', import.meta.url).href,
    new URL('../../../assets/sqm/carousel-4.jpg', import.meta.url).href
])

let time: Ref<number> = ref(30)

let timer: any = null

let style = computed(() => {
    return {
        '--index': value.value,
        '--img': '0rem',
        '--innerHeight': '100vh',
        '--innerWidth': '100vw'
    }
})

onMounted(() => {
    timeRest()
})

onBeforeUnmount(() => {
    window.clearTimeout(timer)
})

function timeRest() {
    clearInterval(timer)
    timer = window.setInterval(() => {
        let valueTem: number = value.value + 1
        if (valueTem >= imgList.length) {
            value.value = 0
        } else {
            value.value = valueTem
        }
    }, time.value * 1000)
}

function changeIndex(index: number) {
    value.value = index
    timeRest()
}
</script>

<template>
    <div class="header-carousel">
        <div :style="style" class="madder-carousel">
            <div class="carousel-list">
                <div v-for="(item, index) in imgList" :key="index + '_1'" class="carousel-item">
                    <img :src="item" alt="">
                </div>
            </div>
            <div class="carousel-row carousel-row-full-screen">
                <div class="carousel-points">
                    <div v-for="(item, index) in imgList" :key="index + '_2'" class="point-item"
                        :class="value === index ? 'point-item-active' : ''" @click="changeIndex(index)"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.madder-carousel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.carousel-list {
    --minusIndex: calc(-1 * var(--index));
    --imgPadding: calc(var(--img) / 4);
    --imgRadius: calc(var(--img) / 2);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 var(--imgRadius);
    transform: translateX(calc(var(--minusIndex) * calc(var(--innerWidth) - var(--img))));
    transition: all 0.5s ease;
}

.carousel-item{
    flex-shrink: 0;
}
.carousel-item img {
    object-fit: contain;
    width: calc(var(--innerWidth) - var(--img));
    height: calc(var(--innerHeight) - var(--img));
    padding: var(--imgPadding);
    border-radius: var(--imgRadius);
}

.carousel-row {
    display: flex;
    justify-content: center;
}

.carousel-row-full-screen {
    position: absolute;
    bottom: 1rem;
    display: flex;
    justify-content: center;
}

.carousel-points {
    height: 0.4rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.point-item {
    background-color: #B1B1B1;
    height: 0.6rem;
    width: 0.6rem;
    border-radius: 50%;
    margin: 0.3rem;
    cursor: pointer;
}

.point-item-active {
    background-color: #000000;
}
</style>
